import React from 'react';
import style from './style'
import util from '../util'
import { Button } from '../ui-components'
import ReactCSSTransitionGroup from 'react/lib/ReactCSSTransitionGroup';
import { logout } from '../actions/auth.action'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import store from 'yields-store'
import cookie from 'component-cookie'
import Toast from '../ui-components/toast'
import { u } from '../actions/util'
import * as appAction from '../actions/app.action'


const NAV_MAP = {
  '/normalSettings' : '通用设置',
  '/roleSettings' : '权限设置',
  '/kudosSettings' : '赞赏设置',
  '/remindSettings' : '提醒设置',
  '/userSettings' : '账户管理设置',
}

@connect(({app}) => ({app}), dispatch => ({actions: bindActionCreators( {...appAction, logout} , dispatch)}))
class App extends React.Component {
  constructor(props) {
    super(props);
    this.displayName = 'App';
  }
  goNav(url) {
    this.props.history.push(url);
  }
  handleLogout() {
    location.href = '/'
  }
  componentDidMount() {
    if (u.userId) {
      this.props.actions.fetchProfile(u.userId)
    }
  }
  render() {
    let {
      pathname 
    } = this.props.location;
    if(pathname === '/') pathname = '/normalSettings';
    const nav = [];
    for (let k in NAV_MAP) {
      const v = NAV_MAP[k];
      nav.push(<li key={k} onClick={this.goNav.bind(this,k)}  className={k === pathname ? style['active'] : null}><span>{v}</span></li>);
    }
    return (
      <div className={style['layout']}>
        <div className={style['navigation']}>
          <div className={style['nav-header']}>
            <img src={`/${util.getImagePath()}/default/wozai.svg`}/>
            <span>系统设置</span>
          </div>
          <ul className={style['nav-box']}>
            {nav}
          </ul>
        </div>
        <div className={style['container']}>
          <div className={style['container-header']}>
            <ReactCSSTransitionGroup 
              transitionName={{
                enter: style['title-enter'],
                enterActive: style['title-enter-active'],
                leave: style['title-leave'],
                leaveActive: style['title-leave-active'],
              }} 
              component={'div'} 
              transitionEnterTimeout={500} 
              transitionLeaveTimeout={500}
              className={style['title']}
            >
              <span key={`title_${pathname}`}>{NAV_MAP[pathname]}</span>
            </ReactCSSTransitionGroup>
            <Button onClick={::this.handleLogout} label={'返回'} />
          </div>
          <ReactCSSTransitionGroup 
            transitionName={{
              enter: style['container-enter'],
              enterActive: style['container-enter-active'],
              leave: style['container-leave'],
              leaveActive: style['container-leave-active'],
            }} 
            component={'div'} 
            transitionEnterTimeout={500} 
            transitionLeaveTimeout={500}
          >
            <div key={`main_${pathname}`} className={style['container-box']}>
              {this.props.children}
            </div>
          </ReactCSSTransitionGroup>
        </div>
        <Toast className={style['toast']}/>
      </div>
    );
  }
}

export default App;
